import {
	ProForm,
	ProFormCheckbox,
	ProFormDependency,
	ProFormInstance,
	ProFormSelect,
	ProFormText
} from "@ant-design/pro-components";
import styles from "./index.module.less";
import { Affix, Button, Col, Flex, Row, Space, message } from "antd";
import ProvinceCityCountry from "./ProvinceCityCountry";
import { DeliveryReturnOptions, DeliveryReturnValues } from "../constant";
import { useRef } from "react";
import { PHONE_REG, REG_EXP_BY_TELE_PHONE, REG_EXP_PHONE_TELEPHONE } from "@/utils/pattern";
import useUrl from "@/hooks/useUrl";
import { omit } from "lodash";
import { useRequest } from "ahooks";
import { addShopsAddressApi } from "@/api/modules/merchant";
import { RESULT_CODES } from "@/api/helper/ResultCode";

export default () => {
	const formRef = useRef<ProFormInstance | undefined>();
	const { loading, runAsync } = useRequest(addShopsAddressApi, { manual: true });
	const { query, navigate, state } = useUrl();
	const shop_id = query.get("shop_id");
	const shop_return_addresses_id = query.get("id");

	const handleRequest = () => {
		const data = state?.data;
		return data
			? {
					...data,
					info: {
						province: data.province,
						city: data.city,
						county: data.county
					},
					is_default: data.is_default ? true : false
			  }
			: {};
	};

	const handleCancel = () => {
		navigate(-1);
	};

	const handleSubmit = () => {
		formRef.current?.validateFieldsReturnFormatValue?.().then(values => {
			const requestData = {
				...omit(values, ["info"]),
				is_default: values.is_default ? 1 : 0,
				province: values.info?.province,
				city: values.info?.city,
				county: values.info?.county,
				shop_id,
				shop_return_addresses_id
			};
			runAsync(requestData).then(res => {
				if (res?.code === RESULT_CODES.SUCCESS) {
					message.success("保存成功");
					navigate(-1);
				}
			});
		});
	};

	return (
		<div className={styles.container}>
			<div className={styles.title}>发/退货地址信息</div>
			<div className={styles.form}>
				<ProForm request={handleRequest} submitter={false} layout="horizontal" labelCol={{ span: 6 }} formRef={formRef}>
					<Row>
						<Col span={12}>
							<ProForm.Item label="省市区" name="info" rules={[{ required: true, message: "请选择省市区" }]}>
								<ProvinceCityCountry />
							</ProForm.Item>
						</Col>
						<Col span={12}></Col>
					</Row>
					<ProFormText
						labelCol={{ span: 3 }}
						label="详细地址"
						rules={[{ required: true, message: "请输入详细地址" }]}
						name="address"
						placeholder={"请输入详细地址"}
					/>

					<Row>
						<Col span={12}>
							<ProFormSelect
								label="类型"
								options={DeliveryReturnOptions}
								rules={[{ required: true, message: "请选择类型" }]}
								name="category"
								placeholder={"请选择类型"}
							/>
						</Col>
						<ProFormDependency name={["category"]}>
							{({ category }) => (
								<Col span={12}>
									<ProFormCheckbox
										labelCol={{ span: 10 }}
										label={`是否设置为默认${
											category === DeliveryReturnValues.delivery ? "发货" : category === DeliveryReturnValues.return ? "退货" : ""
										}地址`}
										name={"is_default"}
									/>
								</Col>
							)}
						</ProFormDependency>
					</Row>
					<Row>
						<Col span={12}>
							<ProFormText
								placeholder={"请输入联系人"}
								label="联系人"
								rules={[{ required: true, message: "请输入联系人" }]}
								name="name"
							/>
						</Col>
						<Col span={12}>
							<ProFormText
								placeholder={"请输入手机号"}
								label="手机号"
								rules={[
									{ required: true, message: "请输入手机号" },
									{ pattern: PHONE_REG, message: "请输入正确的手机号" }
								]}
								name="mobile"
							/>
						</Col>
					</Row>
					<Row>
						<Col span={12}>
							<ProFormText
								placeholder={"请输入公司名称"}
								label="公司名称"
								rules={[{ required: true, message: "请输入公司名称" }]}
								name="company"
							/>
						</Col>
						<Col span={12}>
							<ProFormText
								placeholder={"请输入电话"}
								label="电话"
								rules={[{ pattern: REG_EXP_PHONE_TELEPHONE, message: "请输入正确的电话" }]}
								name="company_tel"
							/>
						</Col>
					</Row>
				</ProForm>
			</div>
			<Affix offsetBottom={0}>
				<Flex justify="center" className={styles.btns}>
					<Space size={10}>
						<Button ghost type="primary" onClick={() => handleCancel()}>
							取消
						</Button>
						<Button loading={loading} type="primary" onClick={() => handleSubmit()}>
							保存
						</Button>
					</Space>
				</Flex>
			</Affix>
		</div>
	);
};
